<template>
  <div class="content">
    <div class="form">
      <ul class="">
        <li>
          <label for="">原密码：</label>
          <a-input-password
            placeholder="输入原密码"
            v-model="old_password"
            style="width: 158px height: 40px"
          />
        </li>
        <li>
          <label for="">新密码：</label
          ><a-input-password
            placeholder="请勿和旧密码保持一致"
            v-model="new_password"
            style="width: 158px height: 40px"
          />
        </li>
        <li>
          <label for="">确认新密码：</label
          ><a-input-password
            placeholder="请再次输入新密码"
            v-model="new_password2"
            style="width: 158px height: 40px"
          />
        </li>
      </ul>
      <div class="button">
        <input type="submit" value="确认" class="confirm" @click="confirm" />
        <input type="reset" value="重置" class="reset" @click="reset" />
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../api/index";

export default {
  name: "change",
  data() {
    return {
      old_password: "",
      new_password: "",
      new_password2: "",
      tip: "",
    };
  },
  methods: {
    reset() {
      this.old_password = "";
      this.new_password = "";
      this.new_password2 = "";
    },
    confirm() {
      if (
        this.old_password == "" ||
        this.new_password == "" ||
        this.new_password2 == ""
      )
        alert("请输入完整信息！");
      else if (this.new_password != this.new_password2)
        alert("两次密码不一致！");
      else if (this.old_password == this.new_password) {
        alert("新、旧密码禁止保持一致！");
      } else {
        request({
          method: "post",
          url: "/user/change_password",
          data: {
            id: this.$store.state.login_id,
            password_old: this.old_password,
            password_new: this.new_password,
          },
        })
          .then((res) => {
            if (res.data.message == "success") {
              alert("修改成功！");
              this.$router.replace("/stuhome/modpsw").catch((err) => err);
            }
          })
          .catch((err) => {
            if (err.response.status == 403) alert("原密码错误！");
            else if (err.response.status == 403) alert("未预料到的错误！");
            else alert("未知错误！");
          });
      }
    },
  },
};
</script>

<style scoped>
.content {
  float: left;
  width: 1264px;
  height: 934px;
  background-color: #fefefe;
}
li {
  list-style: none;
}
.content .form {
  position: relative;
  width: 1270px;
  height: 608px;
  margin: 0px auto;
  background-color: #e9ece9;
}
.content .form ul {
  width: 550px;
  height: 630px;
  margin: 50px auto 0px;
  padding-top: 50px;
}
.content .form ul li {
  width: 360px;
  height: 70px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 80px;
}
.content .form ul label {
  display: inline-block;
  width: 85px;
  height: 70px;
  text-align: right;
  font-weight: 700;
}
.content .form ul .ant-input-password {
  width: 230px;
}
.content .form ul input {
  display: inline-block;
  width: 180px;
  height: 40px;
  border: 1.5px solid #777a77;
  border-radius: 5px;
  /* border-style: hidden; */
  outline: none;
}
.content .form .button {
  position: absolute;
  top: 400px;
  left: 460px;
  bottom: 240px;
  width: 550px;
  height: 31px;
}
.content .form .button .confirm {
  position: absolute;
  left: 13px;
  width: 100px;
  height: 31px;
  background-color: #6593e3;
  border-style: hidden;
  border-radius: 5px;
  border-color: cornsilk;
  background-color: rgba(100, 149, 237, 0.7);
  color: aliceblue;
  font-size: 16px;
}
.content .form .button .reset {
  position: absolute;
  right: 220px;
  width: 100px;
  height: 31px;
  /* margin-top: 30px; */
  background-color: #6593e3;
  border-style: hidden;
  border-radius: 5px;
  border-color: cornsilk;
  background-color: rgba(100, 149, 237, 0.7);
  color: aliceblue;
  font-size: 16px;
}
</style>
